{% extends "layout.html" %}

<!-- 插入额外的CSS -->
{% block extra_css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/add_hike_form.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
    <style>
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .hike-card {
            animation: fadeIn 0.6s ease forwards;
            opacity: 0;
        }

        .hike-card:nth-child(1) { animation-delay: 0.1s; }
        .hike-card:nth-child(2) { animation-delay: 0.2s; }
        .hike-card:nth-child(3) { animation-delay: 0.3s; }
        .hike-card:nth-child(4) { animation-delay: 0.4s; }
        .hike-card:nth-child(5) { animation-delay: 0.5s; }
        .hike-card:nth-child(6) { animation-delay: 0.6s; }

        .result-area {
            margin-top: 20px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            min-height: 100px;
        }
    </style>
{% endblock %}

<!-- 插入额外的JS -->
{% block extra_js %}
    <!-- 添加 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ url_for('static', filename='js/add_hike_form.js') }}"></script>
    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
    <script>
        // 卡片悬停效果
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.hike-card').forEach(card => {
                card.addEventListener('mousemove', (e) => {
                    const x = e.pageX - card.offsetLeft;
                    const y = e.pageY - card.offsetTop;

                    const centerX = card.offsetWidth / 2;
                    const centerY = card.offsetHeight / 2;

                    const angleX = (y - centerY) / 10;
                    const angleY = (centerX - x) / 10;

                    card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
                });

                card.addEventListener('mouseleave', () => {
                    card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
                });
            });

            // 图片懒加载和渐显效果
            const lazyImages = document.querySelectorAll('img[loading="lazy"]');
            const imageObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.style.opacity = 0;
                        img.style.transition = 'opacity 0.6s ease';
                        img.onload = () => {
                            img.style.opacity = 1;
                        };
                        if (img.dataset.src) {
                            img.src = img.dataset.src;
                        }
                        imageObserver.unobserve(img);
                    }
                });
            }, { threshold: 0.1 });

            lazyImages.forEach(img => imageObserver.observe(img));
        });
    </script>
{% endblock %}

{% block content %}

    <!-- 统计信息 -->
<div class="header-stats">
    <div class="stat-item">
        <span class="stat-value">{{ user_count | default(0) | number_format }}</span>
        <span class="stat-label">注册用户</span>
    </div>
    <div class="stat-item">
        <span class="stat-value">{{ visit_count | default(0) | number_format }}</span>
        <span class="stat-label">访问量</span>
    </div>
</div>

<!-- 管理员审核面板 -->
{% if current_user.role == 'admin' %}
    <!-- 线路审核入口 -->
    <div class="admin-panel">
        <h3>待审核路线 ({{ pending_hikes_count }})</h3>
        <div class="pending-hikes-list">
            {% for hike in pending_hikes %}
            <div class="pending-hike-card">
                <h4>{{ hike.name }}</h4>
                <p>提交者: {{ hike.submitted_by_username }}</p>
                <p>提交时间: {{ hike.submitted_at }}</p>
                <div class="admin-actions">
                    <button class="btn-approve" data-hike-id="{{ hike.id }}">批准</button>
                    <button class="btn-reject" data-hike-id="{{ hike.id }}">拒绝</button>
                    <a href="/hike/{{ hike.id }}?preview=true" class="btn-preview">预览</a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    <!-- 评论审核入口 -->
    <div class="comment-review-section">
            <h3>待审核评论 ({{ pending_comments_count }})</h3>
            {% if pending_comments_count > 0 %}
            <div class="alert alert-warning" style="padding: 10px 15px; font-size: 0.9em;">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16" style="margin-right: 5px;">
                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                    <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
                </svg>
                有 {{ pending_comments_count }} 条用户评论等待审核
            </div>
            {% endif %}
            <div class="admin-actions">
                <a href="{{ url_for('comments.manage_comments') }}" class="btn-review-comments">
                    前往审核
                </a>
            </div>
        </div>

    <!-- 留言审核入口 -->
    <div class="message-review-section">
        <h3>待审核留言 ({{ pending_messages_count }})</h3>
        {% if pending_messages_count > 0 %}
        <div class="alert alert-warning" style="padding: 10px 15px; font-size: 0.9em;">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16" style="margin-right: 5px;">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/>
            </svg>
            有 {{ pending_messages_count }} 条留言等待审核
        </div>
        {% endif %}
        <div class="admin-actions">
            <a href="{{ url_for('messages.manage_messages') }}" class="btn-review-messages">
                前往审核
            </a>
        </div>
    </div>

{% endif %}

<div class="container">
    <div class="header-section">

        <!-- 广播 -->
        <div class="announcement-container">
    <div class="announcement-header">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
        </svg>
        <h3>重要通知</h3>
        <div class="announcement-controls">
            <button class="announcement-prev"><</button>
            <button class="announcement-next">></button>
        </div>
    </div>
    <div class="announcement-content">
        {% for announcement in announcements %}
        <div class="announcement-item {% if loop.first %}active{% endif %}" data-id="{{ announcement.id }}">
            <h4>{{ announcement.title }}</h4>
            <p>{{ announcement.content }}</p>
            <span class="announcement-date">{{ announcement.created_at }}</span>
            {% if current_user.role == 'admin' %}
            <button class="announcement-delete" data-id="{{ announcement.id }}">删除</button>
            {% endif %}
        </div>
        {% else %}
        <div class="announcement-item active">
            <p>暂无公告</p>
        </div>
        {% endfor %}
    </div>

    {% if current_user.role == 'admin' %}
    <div class="announcement-form">
        <form id="newAnnouncementForm">
            <input type="text" name="title" placeholder="公告标题" required>
            <textarea name="content" placeholder="公告内容" required></textarea>
            <button type="submit">发布公告</button>
        </form>
    </div>
    {% endif %}
</div>

        <div class="user-controls">
<!--            {% if current_user.is_authenticated %}-->
<!--                <div class="user-profile">-->
<!--                    <span class="username">欢迎, {{ current_user.username }}!</span>-->
<!--                    <a href="{{ url_for('auth.logout') }}" class="logout-btn">-->
<!--                        <span>退出</span>-->
<!--                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--                            <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>-->
<!--                            <polyline points="16 17 21 12 16 7"></polyline>-->
<!--                            <line x1="21" y1="12" x2="9" y2="12"></line>-->
<!--                        </svg>-->
<!--                    </a>-->
<!--                </div>-->
<!--            {% else %}-->
<!--                <a href="{{ url_for('login') }}" class="auth-btn login-btn">-->
<!--                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--                        <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>-->
<!--                        <polyline points="10 17 15 12 10 7"></polyline>-->
<!--                        <line x1="15" y1="12" x2="3" y2="12"></line>-->
<!--                    </svg>-->
<!--                    <span>登录</span>-->
<!--                </a>-->
<!--            {% endif %}-->
        </div>

        <div class="hero-section">
            <h1 class="page-title">精选徒步路线</h1>
            <p class="page-subtitle">探索江苏、浙江和上海地区最具代表性的徒步路线</p>
        </div>

        <!-- 筛选条件 -->
        <div class="filters">
<!--            <div class="filter-group">-->
<!--                <span>地区：</span>-->
<!--                <button class="filter-btn active" id="all-region">全部地区</button>-->
<!--                <button class="filter-btn" id="jiangsu">江苏省</button>-->
<!--                <button class="filter-btn" id="zhejiang">浙江省</button>-->
<!--                <button class="filter-btn" id="shanghai">上海市</button>-->
<!--            </div>-->

<!--            <div class="filter-group">-->
<!--                <span>难度：</span>-->
<!--                <button class="filter-btn active" id="all_difficulty">全部难度</button>-->
<!--                <button class="filter-btn" id="simple_difficulty">简单</button>-->
<!--                <button class="filter-btn" id="medium_difficulty">中等</button>-->
<!--                <button class="filter-btn" id="Hard_difficulty">困难</button>-->
<!--            </div>-->

            <div>
                <form id="provinceForm" class="province-form">
                    <div class="mb-3">
                        <label for="provinceSelect" class="form-label">选择省份：</label>
                        <select class="form-select" id="provinceSelect" name="province">
                          <option value="">-- 请选择省份 --</option>
                          {% for province in provinces %}
                          <option value="{{ province.name }}">{{ province.name }}</option>
                          {% endfor %}
                        </select>
                    </div>
                </form>
            </div>

            <div>
                <form id="levelForm" class="province-form">
                    <div class="mb-3">
                        <label for="provinceSelect" class="form-label">选择难度：</label>
                        <select class="form-select" id="levelSelect" name="level">
                          <option value="">-- 请选择难度 --</option>
                          {% for level in levels %}
                          <option value="{{ level.level }}">{{ level.level }}</option>
                          {% endfor %}
                        </select>
                    </div>
                </form>
            </div>

                <!-- 路线名称 -->
            <div class="filter-group search-box">
                <span class="form-label">搜索：</span><br>
                <input type="text" id="route-search" placeholder="输入路线名称..." class="search-input">
                <button class="filter-btn" id="search">查询</button>
                <button class="filter-btn" id="reset" style="background-color: #dc3545; border-color: #dc3545;">重置</button>
            </div>

<!--            &lt;!&ndash; 添加数据按钮 - 仅管理员可见 &ndash;&gt;-->
<!--            {% if current_user.is_authenticated and current_user.role == 'admin' %}-->
<!--            <div class="filter-group" style="margin-left: auto;">-->
<!--                <button class="add-data-btn" id="showAddFormBtn">-->
<!--                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
<!--                        <line x1="12" y1="5" x2="12" y2="19"></line>-->
<!--                        <line x1="5" y1="12" x2="19" y2="12"></line>-->
<!--                    </svg>-->
<!--                    <span>添加数据</span>-->
<!--                </button>-->
<!--            </div>-->
<!--            {% endif %}-->

                <!-- 消息显示区域 -->
<!--            <div id="messageDisplay" style="color:red; margin-top: 5px;"></div>-->

             <!-- 非管理员，1天只能添加x条数据 -->
            {% if current_user.is_authenticated %}
                <div class="filter-group" style="margin-left: auto;">
                    <button class="add-data-btn" id="showAddFormBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"></line>
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                    </svg>
                    <span>添加数据</span>
                </button>
                    {% if current_user.role != 'admin' %}
                        <div class="add-data-counter" style="font-size: 12px; color: #666;">
                            今日还可添加 {{ [config.MAX_DAILY_ADDITIONS - current_user.get_today_add_count(), 0]|max }} 条数据
                        </div>
                    {% endif %}
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 路线卡片 -->
    <div class="hike-grid">
        {% for hike in hikes %}
        <div class="hike-card">
            <div class="card-image">
                <img src="{{ url_for('static', filename='images/' + hike.image) }}"
                     alt="{{ hike.name }}"
                     loading="lazy">
                <div class="image-overlay"></div>
                <span class="difficulty-tag {{ hike.difficulty|lower }}">{{ hike.difficulty }}</span>
                <button class="save-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
                    </svg>
                </button>
            </div>
            <div class="card-content">
                <div class="card-header">
                    <h3 class="hike-name">{{ hike.name }}</h3>
                    <div class="rating">
                        {% for i in range(5) %}
                            <svg class="star {% if i < hike.score|int %}filled{% endif %}" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                            </svg>
                        {% endfor %}
                        <span>{{ hike.score }}</span>
                    </div>
                </div>
                <p class="location">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                        <circle cx="12" cy="10" r="3"></circle>
                    </svg>
                    {{ hike.address }}
                </p>
                <div class="card-stats">
                    <div class="stat">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 3v18h18"></path>
                            <path d="M18.7 8l-5.1 5.2-2.8-2.7L7 14.3"></path>
                        </svg>
                        <span class="hike-length">{{ hike.length }} km</span>
                    </div>
                    <div class="stat">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <polyline points="12 6 12 12 16 14"></polyline>
                        </svg>
                        <span>{{ hike.duration }}小时</span>
                    </div>
                    <div class="stat">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        <span class="hike-best_time">{{ hike.best_time }}</span>
                    </div>
                </div>
                <a href="/hike/{{ hike.id }}" class="explore-btn">
                    探索路线
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>

<!-- 弹窗容器 -->
<div class="modal-overlay" id="addHikeModal" style="display: none;">
    <div class="modal-container">
        <div class="modal-header">
            <h2>添加新的徒步路线</h2>
            <button class="modal-close-btn" id="closeModalBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </button>
        </div>

        <div class="modal-body">
            <form id="addHikeForm" enctype="multipart/form-data" class="modal-form">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name">路线名称</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
                                <line x1="7" y1="7" x2="7.01" y2="7"></line>
                            </svg>
                            <input type="text" id="name" name="name" placeholder="请输入路线名称" required>
                        </div>
                        <div id="nameError" class="error-message">
                            <button class="error-close-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <line x1="18" y1="6" x2="6" y2="18"></line>
                                    <line x1="6" y1="6" x2="18" y2="18"></line>
                                </svg>
                            </button>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="image">图片上传</label>
                        <div class="file-upload">
                            <label for="image" class="file-upload-label">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                    <polyline points="17 8 12 3 7 8"></polyline>
                                    <line x1="12" y1="3" x2="12" y2="15"></line>
                                </svg>
                                <span id="file-name">选择图片文件</span>
                            </label>
                            <input type="file" id="image" name="image" accept="image/*" required>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="description">描述</label>
                    <textarea id="description" name="description" placeholder="请输入路线描述" rows="4" required></textarea>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="address">地址</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            <input type="text" id="address" name="address" placeholder="省市区" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="route">路线</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"></polygon>
                            </svg>
                            <input type="text" id="route" name="route" placeholder="请输入路线详情" required>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="duration">用时(小时)</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polyline points="12 6 12 12 16 14"></polyline>
                            </svg>
                            <input type="text" id="duration" name="duration" placeholder="例如: 4-6" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="length">长度</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M5 12h14"></path>
                                <path d="M12 5l7 7-7 7"></path>
                            </svg>
                            <input type="text" id="length" name="length" placeholder="例如: 8公里/爬升高度600米" required>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="best_time">最佳时间</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                                <line x1="16" y1="2" x2="16" y2="6"></line>
                                <line x1="8" y1="2" x2="8" y2="6"></line>
                                <line x1="3" y1="10" x2="21" y2="10"></line>
                            </svg>
                            <input type="text" id="best_time" name="best_time" placeholder="例如：春秋季（3-5月、9-11月）" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="difficulty">难度</label>
                        <div class="select-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                            </svg>
                            <select id="difficulty" name="difficulty" required>
                                <option value="" disabled selected>选择难度等级</option>
                                {% for level in levels %}
                                    <option value="{{ level.level }}">{{ level.level }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="score">评分</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
                            </svg>
                            <input type="number" id="score" name="score" step="0.1" min="0" max="5" placeholder="满分5分" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="equipment">装备</label>
                        <div class="input-with-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                                <polyline points="14 2 14 8 20 8"></polyline>
                                <line x1="16" y1="13" x2="8" y2="13"></line>
                                <line x1="16" y1="17" x2="8" y2="17"></line>
                                <polyline points="10 9 9 9 8 9"></polyline>
                            </svg>
                            <input type="text" id="equipment" name="equipment" placeholder="徒步鞋,背包,水壶" required>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="two_step_map_url">两步路地图链接</label>
                    <div class="input-with-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 12a9 9 0 0 1-9 9H3V12a9 9 0 0 1 9-9h9z"></path>
                            <path d="M21 12a9 9 0 0 0-9-9H3v9a9 9 0 0 0 9 9h9z"></path>
                        </svg>
                        <input type="text" id="two_step_map_url" name="two_step_map_url" placeholder="https://..." required>
                    </div>
                </div>

                <div class="form-actions">
                    <button type="button" class="cancel-btn" id="cancelAddFormBtn">取消</button>
                    <button type="submit" class="submit-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                            <polyline points="17 21 17 13 7 13 7 21"></polyline>
                            <polyline points="7 3 7 8 15 8"></polyline>
                        </svg>
                        <span>添加路线</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

</div>
{% endblock %}